<template>
	<div class="content">
		<div class="ad_content" bubble="true" @click="topage(pageList[0].id)">
			<div class="ad_tittle_content">
				<div class="tittle"><text>{{pageList[0].name}}</text></div>
				<div class="more_text"><text class="all_text">更多</text>

					<text class="title2">&#xe61f;</text>
				</div>
			</div>
			<div class="subtitle_context"><text class="subtitle_text">{{pageList[0].description}}</text></div>
			<div class="across_ad_content">
				<div class="ad_item1" @click="toLink(navigations[0])">
					<image style="width:346px;height:338px;" :src="navigations[0].logo"></image>
				</div>
				<div class="line_content">
					<div class="ad_item2" @click="toLink(navigations[1])">
						<image style="width:326px;height:166px;" :src="navigations[1].logo"></image>
					</div>
					<div class="ad_item3" @click="toLink(navigations[2])">
						<image style="width:326px;height:166px;" :src="navigations[2].logo"></image>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	const eeui = app.requireModule('eeui');
	import {
		list as wxPageList
	} from '../../../../api/wxPage'
	import {
		list as navigationList
	} from '../../../../api/navigation'
	export default {
		name: 'acrossAd',
		data() {
			return {
				haveThumbnial: false,
				navigations: [{
					typeId: '',
					logo: ''
				}, {
					logo: ''
				}, {
					logo: ''
				}],
				tagIds: '',
				pageList: [{
					id: '',
					name: '',
					description: ''
				}],
				pageNum: 1,
				pageSize: 3,
			}
		},
		props: ['content'],
		created() { // 在实例创建完成后被立即调用
			this.initIconFont()
			this.loadPage()
			this.loadnavigation()

		},
		methods: {
			topage(e) {
				eeui.openPage({
					url: 'root://pages/index/wxPage/wxPage.js',
					params: e,
                    statusBarType: 'immersion',
                    statusBarStyle:false
				})
			},
			toLink(e) {
				console.log(e)
				if (e.type == 1) {
					eeui.openPage({
						url: 'root://pages/goods/category/category.js',
						params: e.typeId,
                        statusBarType: 'immersion',
                        statusBarStyle:false
					})
				}
				if (e.type == 2) {
					eeui.openPage({
						url: 'root://pages/index/wxPage/wxPage.js',
						params: e.typeId,
                        statusBarType: 'immersion',
                        statusBarStyle:false
					})
				}
				if (e.type == 3) {
					eeui.openPage({
						url: 'root://pages/goods/product/details.js',
						params: e.typeId,
                        statusBarType: 'immersion',
                        statusBarStyle:false
					})
				}
			},
			loadPage() {
				if (!this.isNull(this.content.tagids)) {
					this.tagIds = this.content.tagids.split(',');
					for (var i = 0; i < this.tagIds.length; i++) {
						this.tagIds[i] = parseInt(this.tagIds[i])
					}
				}
				wxPageList({
					mchId: this.getGlobalData().mchId,
					tagIds: this.tagIds
				}).then(res => {
					if (!this.isNull(res.data.data[0].thumbnial)) {
						res.data.data[0].thumbnial = this.thumbnail(res.data.data[0].thumbnial, 710, 446)
						this.haveThumbnial = true
					}
					this.pageList = res.data.data
				})
			},
			loadnavigation() {
				if (this.content.tagids != null) {
					this.tagIds = this.content.tagids.split(',');
					for (var i = 0; i < this.tagIds.length; i++) {
						this.tagIds[i] = parseInt(this.tagIds[i])
					}
				}
				if (this.tagIds.length > 0) {
					navigationList({
						mchId: this.getGlobalData().mchId,
						tagIds: this.tagIds
					}).then(res => {
						this.navigations = res.data.data
						this.navigations[0].logo = this.thumbnail(this.navigations[0].logo, 346, 346)
						this.navigations[1].logo = this.thumbnail(this.navigations[1].logo, 326, 163)
						this.navigations[2].logo = this.thumbnail(this.navigations[2].logo, 326, 163)
					})
				} else {
					navigationList({
						mchId: this.getGlobalData().mchId,
					}).then(res => {
						this.navigations = res.data.data
						this.navigations[0].logo = this.thumbnail(this.navigations[0].logo, 346, 346)
						this.navigations[1].logo = this.thumbnail(this.navigations[1].logo, 326, 163)
						this.navigations[2].logo = this.thumbnail(this.navigations[2].logo, 326, 163)
					})
				}
			},
		},

	}
</script>

<style scoped>
	.content {

		padding-right: 20px;
		padding-left: 20px;
		margin-top: 20px;
	}

	.ad_content {
		background-color: white;
		display: flex;
		border-radius: 16px;
		flex-direction: column;
		padding-left: 20px;
		padding-top: 20px;
		padding-right: 20px;

	}

	.title2 {
		color: gray;
		font-size: 32px;
		font-family: iconfont2;
		margin-top: 5px;
		color: #cccccc;
	}

	.ad_tittle_gsp {
		height: 88px;
	}

	.ad_tittle_content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.icon {
		width: 50px;
		height: 50px;
		color: rgba(42, 42, 54);
		opacity: 0.3;
	}

	.more_text {
		display: flex;
		flex-direction: row;
	}

	.all_text {
		margin-top: 9px;
		height: 30px;
		font-size: 28px;
		font-weight: 400;
		color: rgba(26, 26, 30, 0.3);
	}

	.tittle {
		height: 34px;
		font-size: 36px;
		font-weight: 500;
		color: rgba(26, 26, 30, 1);
	}

	.subtitle_text {
		height: 25px;
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 0.5);
	}

	.across_ad_content {
		display: flex;
		flex-direction: row;
		width: 710px;
		height: 365px;
		margin-top: 20px;
	}



	.ad_item1 {

		flex-shrink: 0;
		width: 346px;
		height: 338px;
		border-top-left-radius: 16px;
		border-bottom-left-radius: 16px;
	}

	.line_content {
		margin-left: 5px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		margin-right: 10px;
	}

	.ad_item2 {
		/* width: 326px; */
		/* height: 172px; */
		/* margin-right: 10px; */
		margin-bottom: 5px;
		border-top-right-radius: 16px;
	}

	.ad_item3 {
		/* width: 326px; */
		/* height: 172px; */
		/* margin-right: 10px; */
		border-bottom-right-radius: 16px;
	}
</style>
